import React, { Component } from "react";
import Header from "../../components/Header/Header";
import { Link } from "react-router-dom";
import axios from "axios"
export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      cates: [
        { id: 1, catename: "家用电器" },
        { id: 2, catename: "美妆护肤" },
        { id: 3, catename: "运动健身" },
      ],
      goods: [
        {
          id: 1,
          goodsname: "手机1",
          price: 20,
        },
        {
          id: 2,
          goodsname: "手机2",
          price: 30,
        },
        {
          id: 3,
          goodsname: "手机3",
          price: 29.9,
        },
      ],
    };
  }
  componentDidMount(){
    // axios({url:"/api/api/getcate"}).then(res=>{
    //   console.log(res);
    // })
  }
  render() {
    let { cates, goods } = this.state;
    return (
      <div>
        <Header title="首页"></Header>
        <ul>
          {cates.map((item) => {
            return (
              <li key={item.id}>
                <Link to={"/list?id=" + item.id + "&a=2&type=1"}>
                  {item.catename}
                </Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <h3>商品列表</h3>
        <ol>
          {goods.map((item) => {
            return (
              <li key={item.id} style={{margin:"0.2rem",background:"pink"}}>
                <Link to={"/detail/"+item.id}>
                  <div>{item.goodsname}</div>
                  <div>price:{item.price}</div>
                </Link>
              </li>
            );
          })}
        </ol>
      </div>
    );
  }
}
